<template>
  <div class="sku">
    <van-popup v-model="show"
               position="bottom"
               round>
      <div class="sku-pop">
        <!-- 商品信息 购买-->
        <div class="buy-alone">
          <div class="goods-1n flex justify-strat align-center">
            <img v-lazy="goodsInfo.photos[0]"
                 class="goods-1n-img"
                 v-if="goodsInfo.photos">

            <div class="goods-info flex flex-direction justify-between">

              <div class="info-item ellipsis-2">
                {{goodsInfo.goods_name}}
              </div>

              <div class="info-item flex justify-between align-center">
                <span class="text-price goods-1n-price">{{goodsInfo.goods_promotion_price}}</span>
              </div>
              <div class="info-item ellipsis-1 text-gray">
                <span class="sku-name"
                      v-for="(item,index) in goodsInfo.goods_spec"
                      :key="'spec_'+index">
                  {{item}}
                </span>
                <!-- <em>库存：{{goodsInfo.groupbuy_stock}}</em> -->
              </div>

            </div>
          </div>
        </div>
        <!-- 商品信息 购物车-->
        <!-- <div class="buy-alone"
             v-show="showAddCart">
          <div class="goods-1n flex justify-strat align-center">
            <img v-lazy="goodsInfo.photos[0]"
                 class="goods-1n-img"
                 v-if="goodsInfo.photos">

            <div class="goods-info flex flex-direction justify-between">

              <div class="info-item ellipsis-2">
                {{goodsInfo.goods_name}}
              </div>

              <div class="info-item flex justify-between align-center">
                <span class="text-price goods-1n-price">{{goodsInfo.qianggou_price}}</span>
              </div>
              <div class="info-item ellipsis-1 text-gray">
                <span class="sku-name"
                      v-for="(item,index) in goodsInfo.goods_spec"
                      :key="'spec_'+index">
                  {{item}}
                </span>
              </div>

            </div>
          </div>
        </div> -->
        <!-- sku区域 -->
        <div class="sku-list"
             v-if="goodsInfo.goods_spec">
          <div class="sku-item"
               v-for="(skuItem,skuIndex) in goodsInfo.spec_name"
               :key="'sku_class_'+skuIndex">
            <div class="sku-class">
              {{ skuItem }}
            </div>
            <div class="item-list flex flex-wrap justify-start align-center">
              <div :class="['sku-detail','ellipsis-1',{'active': goodsInfo.goods_spec[index]}]"
                   v-for="(detail, index) in goodsInfo.spec_value[skuIndex]"
                   :key="'detail_'+index"
                   @click="$emit('clickSkuItem',{index,specList:goodsInfo.spec_value[skuIndex]})">
                {{ detail }}
              </div>
            </div>
          </div>
        </div>

        <!-- 数量 -->
        <div class="goods-num flex justify-between align-center">
          <div class="">购买数量</div>
          <van-stepper v-model="num"
                       :max='goodsInfo.groupbuy_buy_quantity'
                       @change="changeNum" />
        </div>

        <!-- 下单按钮 -->
        <div class="btn-group flex">
          <div class="btn addCart"
               v-show="showAddCart"
               @click="handle('addCart')">加入购物车</div>
          <!-- && goodsInfo.groupbuy_stock > 0 -->
          <div class="btn buyNow"
               v-if="showBuyNow "
               @click="handle('buyNow')">立即购买</div>
          <!-- && goodsInfo.groupbuy_stock <= 0 -->
          <!-- <div class="btn disabledBtn"
               v-if="showBuyNow ">该商品的该规格库存没有,请选择其他规格</div> -->
        </div>

        <!-- 关闭按钮 -->
        <van-icon name="close"
                  size="25px"
                  class="close"
                  @click="show=false"></van-icon>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'GoodsSku',
  data() {
    return {
      show: false, // 组件内是否显示的控制，和vant的mask一起判断
      num: 1 // 商品数量
    }
  },
  watch: {
    /**
     * 监听组件内的状态修改
     * 然后触发父页面的状态修改
     */
    show(newVal, oldVal) {
      this.$emit('clickMask', newVal)
    },
    /**
     * 父组件传递过来的值改变
     * 联动组件内的show进行显示
     */
    showSku(newVal, oldVal) {
      this.show = newVal
    },
    // 商品数量
    goodsNum(newVal, oldVal) {
      this.num = newVal
    }
  },
  methods: {
    // 更新购买数量
    changeNum(value) {
      if (value > this.goodsInfo.groupbuy_buy_quantity) {
        this.$toast({
          message: `该商品最多购买${this.goodsInfo.groupbuy_buy_quantity}件`,
          type: 'loading',
          duration: 3000
        })
        this.$emit('updateNum', this.goodsInfo.groupbuy_buy_quantity)
        return false
      } else {
        this.$emit('updateNum', value)
      }
    },
    /**
     * 点击加入购物车/立即够买的回调
     */
    handle(handleType) {
      this.show = false // 关闭弹窗
      this.$emit(handleType) // 触发回调
    }
  },
  props: {
    /**
     * v-model绑定的值，是否显示sku了
     */
    showSku: {
      type: Boolean,
      default: false
    },
    /**
     * 商品信息
     */
    goodsInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    /**
     * 显示立即购买按钮
     */
    showBuyNow: {
      type: Boolean,
      default: true
    },
    /**
     * 显示加入购物车按钮
     */
    showAddCart: {
      type: Boolean,
      default: false
    },
    /**
     * 商品数量
     */
    goodsNum: {
      type: [Number, String],
      default: 1
    }
  },
  mounted() {},
  /**
   * v-model绑定对应的方法，和修改的方法
   */
  model: {
    prop: 'showSku',
    event: 'clickMask'
  }
}
</script>

<style lang="scss" scoped>
.sku-pop {
  position: relative;
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    color: #999999;
  }
}

// 1n商品模块
.goods-1n {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
  background-color: #ffffff;
  &:last-child {
    border-bottom: none;
  }
  .goods-1n-img {
    width: 90px;
    height: 90px;
    border-radius: 5px;
    margin-right: 10px;
  }
  .goods-info {
    flex: 1;
    font-size: 14px;
    color: #333333;
    min-height: 90px;
    padding: 6px 0;
    margin-right: 20px;
    max-width: 60%;
    .info-item {
      width: 100%;
      .sku-name {
        width: 30%;
      }
    }
    .goods-1n-price {
      color: $mainColor;
      font-size: 18px;
      font-weight: bold;
    }
  }
}

.sku-list {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
  font-size: 14px;
  color: #333333;
  max-height: 250px;
  overflow-y: scroll;
  .sku-item {
    margin-bottom: 10px;
  }
  .sku-class {
    height: 50px;
    line-height: 50px;
  }
  .sku-detail {
    height: 26px;
    line-height: 26px;
    background-color: #f5f6fa;
    border-radius: 13px;
    text-align: center;
    padding: 0 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    max-width: 100%;
    &.active {
      background-color: $mainColor;
      color: #ffffff;
    }
  }
}

// 够买数量
.goods-num {
  width: 100%;
  padding: 10px;
  color: #333333;
  font-size: 14px;
}

// 购买按钮
.btn-group {
  width: 100%;
  .btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    flex: 1;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    position: relative;
    &.addCart {
      background-color: #333333;
    }
    &.buyNow {
      background-color: $mainColor;
    }
    &:active {
      top: 1px; // 实现按钮点击效果
    }
  }
}

.disabledBtn {
  background-color: #bbf0eb;
}
</style>
